<template>
  <div class="main">
    <p>shallowRef 基本 obj1:{{ obj1 }}</p>
    <button @click="change1">change1</button>
    <p>shallowRef 对象整体修改 obj2:{{ obj2 }}</p>
    <button @click="change2">change2</button>
    <p>shallowReactive obj3:{{ obj3 }}</p>
    <button @click="change3">change3</button>
    <hr />

    <p>readonly obj51:{{ obj51 }}</p>
    <p>shallowReadonly obj61:{{ obj61 }}</p>
    <hr />

    <p>toRaw 响应式对象变为原始类型 obj71:{{ obj71 }}</p>
    <p>markRaw 原始类型不能变为响应式 obj81:{{ obj81 }}</p>
    <br />
    <hr />
    <p>customRef msg:{{ msg }}</p>
    <input type="text" v-model="msg" />
  </div>
</template>
<script setup lang="ts">
import {
  reactive,
  ref,
  shallowRef,
  shallowReactive,
  readonly,
  shallowReadonly,
  toRaw,
  markRaw,
} from "vue";
import useMsg from "@/hooks/useMsg";
let obj1 = shallowRef("奔驰");
let change1 = () => {
  obj1.value = "car"; //ok
};
// shallow浅的作用
let obj2 = shallowRef({
  a: 1,
  b: 2,
});
let change2 = () => {
  //   obj2.value.a = 3;//不起作用
  obj2.value = {
    a: 0,
    b: 0,
  };
};
let obj3 = shallowReactive({ id: 3, name: { aa: 1, bb: 2 } }); //id ok; name: { a: 1, b: 2 }不起作用
let change3 = () => {
  obj3.id = 5;
  //   obj3.name.aa = 0;//起效果了，应该是不起效果的
  //   obj3.name.bb = 0;//起效果了
};
/* 2 readonly只读 */
let obj4 = ref(0);
let obj41 = readonly(obj4);
// obj41.value = 1

let obj5 = reactive({ a: 1, b: 2, c: 3, d: 4 });
let obj51 = readonly(obj5);
// obj51.a = 2

let obj6 = reactive({
  a: 1,
  b: {
    name: "aa",
  },
});
let obj61 = shallowReadonly(obj6);
// obj61.a = 1; //浅层不能修改
obj61.b.name = "bb";

/* 3 toRaw原始对象，markRaw  */
let obj7 = reactive({
  b: {
    name: "aa",
  },
});
let obj71 = toRaw(obj7);
console.log(obj71);
// mockjs markRaw(mockjs) 第三大方库的响应式
let obj8 = markRaw({ a: 1, b: 22 });
let obj81 = reactive(obj8);

/* 4 自定义ref hook */
let { msg } = useMsg("init", 1000);
</script>
<style lang="scss" scoped></style>
